<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/page-style/area.css">
    <title>区域首页</title>
</head>

<body>
    <div class="container">
        <!-- head部分 -->
        <div class="grid grid-cell head">
            <div class="esc"> <a href="./index.html"><img src="./imgs/查看更多@3x.png" alt=""></a></div>
            <div class="head-text">天宁寺</div>
            <div class="share"> <a href=""><img src="./imgs/分享-黑.png" alt=""></a></div>
        </div>
        <div class="w">
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="请输入您要搜索的内容">
        </div>
        <!-- banner图 -->
        <div class="banner">
            <img src="./imgs/天宁寺.webp" alt="">
        </div>
    </div>
        <!-- 分区，7个小块链接 -->
        <div class="area">
            <a href="./区域1.html"><img src="./imgs/aaa景区@3x.png" alt=""><span>景区</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa美食@3x.png" alt=""><span>美食</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa酒店民宿@3x.png" alt=""><span>酒店名宿</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa特色产品@3x.png" alt=""><span>特色产品</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa赏花@3x.png" alt=""><span>赏花</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa节庆@3x.png" alt=""><span>节庆</span></a>
            <a href="./区域1.html"><img src="./imgs/aaa采摘@3x.png" alt=""><span>采摘</span></a>
        </div>
        <!-- 景区 -->
        <div class="see see-first">
            <div class="title">
                <span>景区</span>
                <s>查看更多</s>
            </div>
            <div class="p-all">
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">大洋湾景区</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">盐城新四军纪念馆</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">盐城金鹰海洋世界</div>
                </div>
            </div>
        </div>
        <!-- 美食 -->
        <div class="see">
            <div class="title">
                <span>美食</span>
                <s>查看更多</s>
            </div>
            <div class="p-all">
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">盐城八大碗</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">三毛农家菜</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">竹鱼坊</div>
                </div>
            </div>
        </div>
        <!-- 酒店名宿 -->
        <div class="see">
            <div class="title">
                <span>酒店名宿</span>
                <s>查看更多</s>
            </div>
            <div class="p-all">
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">酒店</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">酒店</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">酒店</div>
                </div>
            </div>
        </div>
        <!-- 特色产品 -->
        <div class="see">
            <div class="title">
                <span>特色产品</span>
                <s>查看更多</s>
            </div>
            <div class="p-all">
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">萝卜干</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">常州土特产</div>
                </div>
                <div class="picture">
                    <img src="" alt="">
                    <div class="word">大麻糕</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>